import { Component } from 'react';

import { Boxs,Avatar} from 'saltui';

const { HBox, Box,VBox } = Boxs;

import DB from 'db';

export default class Page extends Component {
 constructor(props) {
    super(props);

    this.state = {
      processLogList:[],
    };
    
  }


 componentDidMount (){
   let t = this;
   var taskId = this.props.taskId;
   var listType = this.props.listType;
   var processInstanceId = this.props.processInstanceId;
   var dealwhithId = processInstanceId;
   if(listType == "0" || listType == '5'){
    dealwhithId = taskId;
   }
   DB.FlowModuleAPI.queryFlowChart({taskId:dealwhithId,listType:listType}).then((content) => {
    // var allActivityList = content.allActivityList;//所有的流程节点
    // var processLogList = content.processLogList;//流程日志
    //var processLogList = content.processLogList;//流程已办节点
    var processLogList = content.processLogList;
    t.setState({
      processLogList:processLogList,
    });
    }).catch((error) => {

    });


  }


  render() {
    
    const t = this;
    const index = this.state.index;

    //样式格式化
    function formatIcon(type){
      if(type=='startevent'){
        return "iconfont icon-begin";
      }else if(type=='endevent'){
        return "iconfont icon-end";
      }else if(type=='usertask'){
        return "iconfont icon-mine";
      }

    }

    //名称
    function dealactionname(item){
      var name = '';
      if(item.dealactionname){
        name += item.dealactionname;
        if(item.nextactivityname){
          name += '至'+item.nextactivityname;
        }
      }
      return name;
    }


    return (
      <div className="t-BCf t-PT10 t-PB10 t-PR">
        <div className="dd-process-dec"></div>
            
          {
            this.state.processLogList.map(function(item,i){
            return (
                  <HBox className="t-PR">
                    <Box className="t-W44">
                        <div className="dd-border-o dd-Bgreen"></div>
                    </Box>
                    
                    <Box flex={1} className="t-PR t-M10">
                      <Box className="t-PA" style={{top:"14",left:"-10"}} >
                          <img src="../images/triangle.png"/>
                      </Box>
                      <Box className="dd-boxshow t-R6">
                        <HBox className="t-PL14 t-PR14 t-PT10 t-PB10   dd-bottom-border">
                        
                            <Box flex={1} className="t-omit">{item.curactivityname}</Box>
                            <Box  flex={3} className={item.dealaction == 'commit' || item.dealaction == 'pass' || item.dealaction == 'transfer'|| item.dealaction == 'addSign'|| item.dealaction == 'jump'|| item.dealaction == 'end'|| item.dealaction == 'cancel'|| item.dealaction == 'recall'?'t-FCgreen t-FAR t-omit':item.dealaction == 'back'?'t-FCred t-FAR t-omit':'t-FAR t-omit'}>{dealactionname(item)}</Box>
                            
                        </HBox>
                        <HBox className="t-PL14 t-PR14 t-PT10 t-PB10  t-LH1_5" vAlign="center">
                          <Box className="t-MR10">
                            <Avatar name={item.dealusername} src={this.state.dealusericon} defaultColor={'#F6BF26'} />
                          </Box>
                          <Box className="t-PR10" flex={1}>
                              <div className="t-omit t-FS16">{item.dealusername}</div>
                              <div className="t-FS12 t-omit">{item.dealuserorg}</div>
                          </Box>
                          <Box flex={3}>
                              <HBox><Box flex={1} className="t-omit" style={{textAlign:'right'}}>{item.createdDate}</Box></HBox>
                              {/* <HBox><Box flex={1} className="t-omit">{item.dealTime}</Box><Box  className="t-FCgreen t-FAR">提交</Box></HBox> */}
                          </Box>
                        </HBox>
                        <HBox className={item.receivenames == null || item.receivenames == ''?'t-DN':'t-PL14 t-PR14 t-PT10 t-PB10 dd-top-border'}>
                        
                            <Box flex={1}>接收者</Box>
                            <Box flex={3} className="t-FAR">{item.receivenames}</Box>
                            
                        </HBox>
                      </Box>
                    </Box>
                  </HBox>
            )}.bind(this))
        }
            
        {/* <table className="dd-rectNode" onClick={this.handleClick.bind(this)} data-id="5">
          <tr className="dd-approved">
            <td className="ico start"><i className="iconfont icon-begin"></i></td>
            <td data-id="5" onClick={this.handleClick.bind(this)} >开始</td>
          </tr>
        </table>
        <i className="iconfont icon-arrow"></i>
        <table className="dd-rectNode">
          <tr className="dd-approved">
            <td className="ico start"><i className="iconfont icon-mine"></i></td>
            <td>填报结点</td>
          </tr>
        </table>
        <i className="iconfont icon-arrow"></i>
        <table className="dd-rectNode">
          <tr className="dd-approving">
            <td className="ico start"><i className="iconfont icon-process2"></i></td>
            <td>审批中</td>
          </tr>
        </table>
        <i className="iconfont icon-arrow"></i>
        <table className="dd-rectNode">
          <tr >
            <td className="ico start"><i className="iconfont icon-send"></i></td>
            <td>结点</td>
          </tr>
        </table>
        <i className="iconfont icon-arrow"></i>
        <table className="dd-rectNode">
          <tr>
            <td className="ico end"><i className="iconfont icon-end"></i></td>
            <td>结束</td>
          </tr>
        </table> */}
      </div>)       
  }
}


